// import { TButton, TMenu } from 't';
import TButton from 't/basic/button';
import TMenu from 't/basic/menu'
import { defineComponent, ref, toRefs } from 'vue';
export default defineComponent({
  name: 'Popover',
  components: { TMenu, TButton },
  props: {
    show: Boolean,
    actions: Array,
    anchor: {
      default: 'bottom-left',
      type: String,
    },
    style:String,
    styleClass:String
  },
  emits: ['show', 'update:show', 'onSelect'],
  setup(props, { emit, slots, expose }) {
    const { show, actions, anchor,style,styleClass } = toRefs(props);
    const menuContent = ref([]);
    const menuRef = ref(null);
    expose({
      hide: () => {
        menuRef.value.hide();
      },

      show: () => {
        menuRef.value.show();
      },
    });
    const render = () => {
      return (
        <t-button
          style='padding:0;font-size:14px'
          onClick={() => {
            // if (show.value) {    menuRef.value.hide()}else {
            //  menuRef.value.show();
            // }
          }}
        >
          {slots.reference?.()}
          <t-menu
            anchor={anchor.value}
            modelValue={show.value}
            ref={menuRef}
            style={style.value}
            class={styleClass.value}
            onShow={() => {
              emit('update:show', true);
            }}
            onHide={() => {
              emit('update:show', false);
            }}
          >
            {slots.default
              ? slots.default()
              : (() => {
                  let TM = [];
                  if (actions.value) {
                    for (let i = 0; i < actions.value.length; i++) {
                      TM.push(
                        <p
                          key={i}
                          onClick={e => {
                            emit('select', actions.value[i]);
                            menuRef.value.hide();
                            emit('update:show', false);
                            e.stopPropagation
                              ? e.stopPropagation()
                              : (e.cancelBubble = true);
                            e.preventDefault();
                            return false;
                          }}
                          style='padding:8px 10px;margin:0;    text-align: center;'
                        >
                          <span>{actions.value[i]?.text}</span>
                        </p>,
                      );
                    }
                  }
                  return TM;
                })()}
          </t-menu>
        </t-button>
      );
    };
    return render;
  },
});
